<template>
    <div class="container">
        <Header title="用户注册"></Header>
        <div class="register">
            <h3>新用户注册</h3>
            <ul class="register-list">
                <li>
                    <div class="register-list-row">
                        <label class="register-row-title">公司代码</label>
                        <div class="register-row-content">
                            <input type="text" placeholder="请输入公司代码" v-model="companyCode" >
                            <i class="fa fa-times-circle fa-hidden"></i>
                            <i class="fa fa-exclamation-circle"></i>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="register-list-row">
                        <label class="register-row-title"><span style="color:#ff4949">*</span>姓名</label>
                        <div class="register-row-content">
                            <input type="text" placeholder="请输入姓名" v-model="accountName" maxlength="11">
                            <i class="fa fa-times-circle "></i>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="register-list-row">
                        <label class="register-row-title"><span style="color:#ff4949">*</span>账号</label>
                        <div class="register-row-content">
                            <input type="tel" placeholder="请输入手机号" v-model="phone" maxlength="11">
                            <i class="fa fa-times-circle "></i>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="register-list-row">
                        <label class="register-row-title"><span style="color:#ff4949">*</span>验证码</label>
                        <div class="register-row-content">
                            <input type="text" placeholder="请输入验证码" v-model="code">
                            <i class="fa fa-times-circle "></i>
                        </div>
                        <button  :class="codeDis ? 'verificationing':'verification'" v-bind:disabled="codeDis" @click="sendVerificationCode">{{verificationCode}}</button>
                    </div>
                </li>
            </ul>
            <button class="btn-register" @click="register" v-if="isShow">注册</button>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                verificationCode:'发送验证码',
                timer:0,
                codeDis : false,
                accountName:'',
                code:'',//验证码
                phone:'',//手机号
                companyCode:'',//公司代码
                isShow:true
            }
        },
        mounted: function() {
            //初始化数据
            this.verificationCodeTimer(true);
        },
        activated:function(){
            //初始化数据
            this.verificationCodeTimer(true);
        },
        methods:{
            //发送验证码
            sendVerificationCode:function(){
                var _self = this;
                if(!_self.accountName){
                    layer.msg("请填写姓名");
                    return;
                }
                //验证手机号
                if(!_self.phone){
                    layer.msg("请填写手机号");
                    return;
                }
                if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone))){
                    layer.msg("请填写正确的手机号");
                    return;
                }
                //设置不能点击
                _self.codeDis = "disabled";
                var params = {
                    phone:_self.phone
                };
                var body = {};
                body.params = params;
              //  layer.msg("短信发送成功，请注意查收");
                var url = this.utilHelper.apiUrl+'/api/sendVerificationCode';
                _self.$http.post(url,body).then((response) => {
                    var body = response.body;
                    if(body.result == 1){
                        layer.msg("短信发送成功，请注意查收");
                        _self.verificationCodeTimer(false);
                    }else{
                        layer.msg(body.resData.resultMsg);
                    }
                }),(response => {
                   layer.msg("发送短信异常");
                });
            },
            //短信验证码定时器
            verificationCodeTimer:function(flag){
                var _self = this;
                var date = 0;
                if(flag){//页面刷新，或重进入时
                    if(window.sessionStorage.getItem(_self.utilHelper.appAgency+"_verification")){//若缓存中不存在数据则 不进行倒计时
                        date =  window.sessionStorage.getItem(_self.utilHelper.appAgency+"_verification");
                    }else{
                        return;
                    }
                }else{//点击发送按钮时
                    date = new Date().getTime() +1000*120;
                    window.sessionStorage.setItem(_self.utilHelper.appAgency+"_verification",date);
                    _self.timer = 120;
                }

                _self.codeDis = "disabled";
                var code = setInterval(function(){
                    _self.timer = Math.ceil((date - new Date().getTime())/1000);//向上取整数
                    if(_self.timer <= 0 ){
                        window.sessionStorage.removeItem(_self.utilHelper.appAgency+"_verification");
                        _self.verificationCode = '发送验证码';
                        _self.codeDis = false;
                        window.clearInterval(code);
                    }else{
                        _self.verificationCode = _self.timer + 'S';
                        _self.timer-=1;
                    }
                },1000);
            },

            //注册新用户（含绑定功能）
            register:function(){
                var _self = this;
                //_self.isShow = false;//隐藏注册按钮
                var params = {
                    accountName:_self.accountName,
                    phone:_self.phone,
                    verificationCode:_self.code,
                    companyCode:_self.companyCode
                }
                if(!_self.accountName){
                    layer.msg("请填写姓名");
                    return;
                }else if(!_self.phone){
                    layer.msg("请填写账号");
                    return;
                }else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone))) {
                    layer.msg("请填写正确的手机号");
                    return;
                }else if(!_self.code){
                    layer.msg("请填写验证码");
                    return;
                }
                var body = {};
                body.params = params;
                var url = _self.utilHelper.apiUrl+'/api/regist';
                _self.$http.post(url,body).then((response) => {
                    var body = response.body.resData;
                    if(body.result == 1){
                        layer.msg(body.resultMsg);
                        //页面跳转
                        //清空倒计时
                        window.sessionStorage.removeItem(_self.utilHelper.appAgency+"_verification");
                        // this.loginUser();
                    }else{
                        layer.msg(body.resultMsg);
                        //_self.isShow = true;
                    }
                }),(response => {
                    layer.msg("注册异常");
                    //_self.isShow = true;
                })
            },
            //登陆方法
            loginUser: function () {
                var _self = this;
                    var params = {
                        phone:_self.phone,
                        password:'x1234567'
                    };
                    var body = {};
                    body.params = params;
                    var url = _self.utilHelper.apiUrl + "/api/login";
                    _self.$http.post(url, body).then((response) => {
                        var data = response.body;
                        var result = data.result;
                        var errorMsg = data.errorMsg;
                        if (result == "1") {
                            window.sessionStorage.setItem(_self.utilHelper.appAgency+"_userId", data.resData.id);
                            window.sessionStorage.setItem(_self.utilHelper.appAgency+"_userName", data.resData.accountName);
                            window.sessionStorage.setItem(_self.utilHelper.appAgency+"_phone", data.resData.phone);
                            window.sessionStorage.setItem(_self.utilHelper.appAgency+"_isLogin", true);
                            window.sessionStorage.setItem(_self.utilHelper.appAgency+"_userRole", data.resData.userRoleId);
                            window.sessionStorage.setItem(_self.utilHelper.appAgency+"_isRegister","true");

                            _self.$router.replace({
                                path: '/agency'
                            })
                        } else {
                            layer.msg(errorMsg, {
                                time: 1000
                            });
                        }
                    }, (response) => {
                        layer.msg('登陆超时', {
                            time: 1000
                        });
                    });

            }

        }
    }
</script>
<style>
    .register{padding: 130px 20px 50px;height: 100%;}
    .register h3{text-align: center;font-size: 20px;margin-bottom: 80px;}
    .register-list li{border-bottom: 1px solid #ccc;padding: 6px 0 6px 16px;margin-bottom: 20px;}
    .register-list-row{position: relative;padding-left: 90px;padding-right:70px;height: 24px;line-height: 24px;}
    .register-row-title{position: absolute;left: 0;top: 0;width: 80px;color: #333;font-size: 16px;text-align: right;}
    .register-row-content{position: relative;}
    .register-row-content input{height: 24px;font-size: 14px;background-color: #f2f2f2;outline: none;padding-right: 30px;}
    .register-row-content .fa{position: absolute;right: 6px;top: 2px;font-size: 20px;color: #999;display: none;z-index: 1;}
    .register-row-content .fa-exclamation-circle{color: #bf0000;}
    .verification{position: absolute;right: 0;top: 0;width: 70px;height:24px;color: #333;font-size: 12px;text-align: right;background-color: #ff8b22; color: #fff;  text-align: center;  border-radius: 4px;}
    .verificationing{position: absolute;right: 0;top: 0;width: 70px;height:24px;color: #333;font-size: 12px;text-align: right;color: #ff8b22; background-color:#cacaca; text-align: center;  border-radius: 4px;}
    .btn-register{display: block;width: 100%;padding:12px 0;border:1px solid #ff7900;background-color: #f3ece6;color: #ff7900;margin-top: 50px; }
</style>
